<template>
	<div class="confirm">
		<Head>
			合同确认
		</Head>
		<div class="confirm-list">
			<div class="confirm-title">
				合同明细
			</div>
			<ul class="confirm-number">
				<li v-for='(list,index1) in listnumber'>
					<div class="radius radius-left">	
					</div>
					<div class="radius radius-right">	
					</div>
					<p class="list-title">
						<span class="number-title">订单编号</span>
						<span class="number">
							{{list.ordernumber}}
						</span>
					</p>
					<p class="list-title">
						<span class="number-title">合同编号</span>
						<span class="number">
							{{list.agreementnumber}}
						</span>
					</p>
					<div class='confirm-img'>
						<img  class='previewer-demo-img' v-for="(item, index) in list.url" :src="item.src" @click="show(index,index1)">
						<div v-transfer-dom>
					      <previewer :list="list.url" ref="previewer" :options="options" @on-close="onClose"></previewer >
					    </div>
					</div>
					<p class="confirm-click">
						<i class="icon icon-hand"></i>
						点击图片浏览大图
					</p>
				</li>	
			</ul>
		</div>
		<div class="confirm-list-empty" :class="{'listempty':listempty}">
			<img src="../assets/cat.png" alt="" class="empty-cat">
			<p class="power">
				您无查看权限
			</p>
			<p>
				请更换帐号试试
			</p>
		</div>

		<!-- 下载 -->
		<div class="download" :class="{'isDownLoad':isDownLoad}">
			<img src="../assets/download.png" alt="">
		</div>
		
	</div>
</template>
<script>

import { Previewer, TransferDom} from 'vux'

import Head from './Head'

	export default{
		
		data(){
			return {
				listempty:false,
				isDownLoad:false,
				listnumber:[{
					ordernumber:'XS16110410864508',
					agreementnumber:'HT16110410864508',
					url:[
						{src:'http://img4.imgtn.bdimg.com/it/u=1366576052,702195932&fm=26&gp=0.jpg'},
						{src:'http://img2.imgtn.bdimg.com/it/u=4091494539,2648474751&fm=26&gp=0.jpg'}
					]	
				},
				{
					ordernumber:'XS16110410864508',
					agreementnumber:'HT16110410864508',
					url:[
						{'src':'http://img3.imgtn.bdimg.com/it/u=720891101,4253860064&fm=26&gp=0.jpg'},
						{'src':'http://img2.imgtn.bdimg.com/it/u=4091494539,2648474751&fm=26&gp=0.jpg'}
					]
				}
				,{
					ordernumber:'XS16110410864508',
					agreementnumber:'HT16110410864508',
					url:[
						{'src':'http://img4.imgtn.bdimg.com/it/u=1366576052,702195932&fm=26&gp=0.jpg'},
						{'src':'http://img4.imgtn.bdimg.com/it/u=1366576052,702195932&fm=26&gp=0.jpg'}
					]
				},{
					ordernumber:'XS16110410864508',
					agreementnumber:'HT16110410864508',
					url:[
						{'src':'http://img3.imgtn.bdimg.com/it/u=2499141953,2457645140&fm=15&gp=0.jpg'},
						{'src':'http://img4.imgtn.bdimg.com/it/u=1366576052,702195932&fm=26&gp=0.jpg'}
					]
				},{
					ordernumber:'XS16110410864508',
					agreementnumber:'HT16110410864508',
					url:[
						{'src':'http://img3.imgtn.bdimg.com/it/u=3433150644,2482480477&fm=26&gp=0.jpg'},
						{'src':'http://img4.imgtn.bdimg.com/it/u=1366576052,702195932&fm=26&gp=0.jpg'}
					]
				}
				],
				options: {
					fullscreenEl:false,
			    }
			}
			},
		  directives: {
	        TransferDom
	      },
	      components: {
	        Previewer,Head
	      },
		methods:{
			 showMsgbox() {
		        MessageBox({
		        	title:'',
		        	 message: '是否退出?',
		        	 showCancelButton: true,
		        	 confirmButtonText:'是',
		        	 cancelButtonText:'否'

		        });
		      },
		     
		      show (index,index1) {
		      	this.isDownLoad=true;
		      	this.$refs.previewer[index1].show(index)
		      

		      },
		      onClose(){
				this.isDownLoad=false
				}

		     
		},
		

	}
</script>
<style lang='scss' scoped>
@import '../style/confirm'
</style>